<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 系统用户 </el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10" @keyup.enter.native="handleSearch"
 ></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
			</div>
			<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
			 row-key="id">
				@selection-change="handleSelectionChange" >

				<el-table-column class-name="user2" prop="name" label="姓名"></el-table-column>
				<el-table-column prop="loginName" label="登录名" align="center"></el-table-column>
				<el-table-column prop="state" :formatter="stateFilter" label="状态" align="center"></el-table-column>
				<el-table-column prop="creationTime" label="添加时间"></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="1"
				 :page-sizes="[10, 15, 20, 30]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
				</el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :before-close="closeDialog" :close-on-click-modal="false" title="系统管理员" :visible.sync="editVisible" width="40%">
			<el-form ref="form" :model="form" id="mform" label-width="100px" :rules="rulesForm">
				<el-form-item label="用户姓名" prop="name">
					<el-input v-model="form.name" id="name"></el-input>
				</el-form-item>

				<el-form-item label="登录名" prop="loginName">
					<el-input v-model="form.loginName" id="loginName"></el-input>
				</el-form-item>

				<el-form-item label="所属角色">
					<el-transfer :titles="['可选角色','已选角色']" filterable filter-placeholder="请输入角色名" v-model="selectRole" :data="allRole"></el-transfer>
				</el-form-item>

				<el-form-item label="备注信息" prop="description">
					<el-input id="description" type="textarea" :rows="3" placeholder="不超过50个字" v-model="form.description"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog()">取 消</el-button>
				<el-button type="primary" @click="saveEdit('form')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
		name: 'user_list',
		data() {
			return {
				query: {
					name: '',
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				selectuser: [],
				multipleSelection: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				allRole: [],
				selectRole: [],
				loading: false,
				rulesForm: {
					name: [{
							required: true,
							message: '请输入用户名称!'
						},
						{
							min: 2,
							max: 30,
							message: '长度在 2 到 10 个字符'
						}
					],
					loginName: [{
							required: true,
							message: '请输入用户登录名!'
						},
						{
							min: 2,
							max: 30,
							message: '长度在 2 到 20 个字符'
						}
					],
					description: [{
						min: 0,
						max: 50,
						message: '长度不能超过50个字符'
					}]
				}
			};
		},
		created() {
			this.loading = true;
			this.getData();
		},
		methods: {
			stateFilter(row, column) {
				var str = '';
				switch (row.state) {
					case 0:
						str = '正常';
						break;
					case 1:
						str = '已锁定';
						break;
					default:
						str = row.state;
						break;
				}
				return str;
			},

			// 触发搜索按钮
			handleSearch() {
				this.query.pageIndex=1;
				this.getData();
			},
			getData() {
				this.loading = true;
				var parmas = {
					userName: this.query.name,
					tenantId: '',
					pageIndex: this.query.pageIndex,
					pageSize: this.query.pageSize
				};

				axios({
					url: config.systemset + '/set/user/getpage',
					method: 'post',
					data: parmas,
					headers: {
						// 'Content-Type': 'multipart/form-data'
					}
				}).then((res) => {
					this.tableData = res.data.list;
					this.pageTotal = res.data.total;
					this.loading = false;
				});
			},

			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				var that = this;
				this.$confirm('确定要删除【' + row.name + '】吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						axios.get(config.systemset + '/set/user/delete/' + row.id).then((res) => {
							that.getData();
							that.tableData.splice(index, 1);
							that.$message.success('删除成功');
						});
					})
					.catch(() => {});
			},

			// 编辑操作
			handleEdit(index, row) {
				var length = this.allRole.length;


				var allRole = [];
				this.selectRole = [];
				if (length == 0) {
					axios.post(config.systemset + '/set/role/getselectrole', {
							tenantId: ''
						})
						.then((res) => {
							console.log(res);
							if (res.data) {

								for (var i = 0; i < res.data.length; i++) {
									allRole.push({
										key: res.data[i].id,
										label: res.data[i].roleName
									});
								}
							}
							this.allRole = allRole;

						});
				}

				if (row) {
					this.idx = index;
				 
					this.form = row;
					this.selectRole = row.roleId;

				}

				this.editVisible = true;


				// this.$refs.form.resetFields(); //移除表单校验并初始化表单，一般用于添加		
				// this.$refs.form.clearValidate(); //移除表单校验，一般用于修改
			},
			// 保存编辑
			saveEdit(formName) {
				var that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {

						var dto = this.form;
						dto.roleId = this.selectRole;
						axios
							.post(config.systemset + '/set/user/post', dto)
							.then((res) => {
								if (res.data.result == false) {
									that.$message.error(res.data.promptMsg);
									console.log(res);
								} else {
									that.$refs.form.clearValidate();
									//that.editVisible = false;
									that.closeDialog();
									that.$message.success(`保存成功!`);
									that.getData();
								}
							})
							.catch((error) => {
								console.log(error); //  错误处理 相当于error
							});
						that.$refs.form.clearValidate();
					} else {
						return false;
					}
				});
			},

			closeDialog() {


				this.selectRole = [];
                var that=this;
				//this.$refs.form.resetFields();
				this.form = {
					id: '',
					name: '',
					loginName: '',
					description: '',
					tenantId: ''
				};
				setTimeout(function() {
					that.$refs.form.clearValidate();
	
				}, 100);
		        this.editVisible = false;
		 
			},
			// 分页导航
			handlePageChange(val) {
				//跳转到
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},
			handleSizeChange(val) {
				//改变页码
				this.query.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) {
				//下一页console.log(`当前页: ${val}`);
				this.query.pageIndex = val;
				this.getData();
			}
		},
		watch: {}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
